<template>
  <div>
    <el-form ref="cateAdd" :rules="rules" :model="cate" label-width="80px">
      <el-form-item label="分类名字" prop="cateName">
        <el-input v-model="cate.cateName"></el-input>
      </el-form-item>
      <el-form-item label="父级分类" prop="pid">
        <el-select v-model="cate.pid" placeholder="请选择父级分类">
          <el-option label="顶层分类" :value="0"></el-option>
          <el-option
            v-for="cate in cates"
            :key="cate.id"
            :label="cate.cateName"
            :value="cate.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否启用" prop="enAbled">
        <el-switch v-model="cate.enAbled" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="分类图标">
        <el-upload
          ref="upload"
          class="upload-demo"
          action="/api/upload"
          name="file"
          accept=".png, .jpg, .jpeg"
          :headers="{token: 'dwfegr6'}"
          :auto-upload="false"
          :data="{a: 10,b: 20}"
          :before-upload="beforeUpload"
          :on-success="uploadSucess"
          >
          <el-button size="small" type="primary">点击选择</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <el-button @click="uploadFile" size="small" type="success">点击上传</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addCate } from '_api'
export default {
  props: {
    cates: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      // 新增cate
      cate: {
        cateName: '',
        enAbled: 1, // 1启用 0 禁用
        pid: 0, // 父级分类id 0代表顶层分类
        cateIcon: ''
      },
      // 表单验证规则
      rules: {
        cateName: [
          // 必填验证
          {
            required: true,
            message: '分类名称必须填写',
            trigger: 'blur'
          },
          // 正则验证
          {
            pattern: /[a-zA-Z]\w{3,7}/,
            message: '必须是4-8位字母、数字、或_且英字母开头'
          }
        ],
        enAbled: [
          {
            required: true,
            message: 'enAbled必须输入'
          }
        ],
        pid: [
          {
            required: true,
            message: '父级分类必须填写'
          }
        ]
      }
    }
  },
  methods: {
    beforeUpload (file) {
      /*
        参数是1 选中的文件
        return true 则继续上传
        return false 终止上传
      */
      if (file.size > (500 * 1024)) {
        alert('上传文件体积不能超出500kb')
        return false
      } else {
        return true
      }
    },
    uploadFile () {
      // 手动上传文件 调用 upload一个方法 submit
      this.$refs.upload.submit()
    },
    uploadSucess (res) {
      // 上传成功回调
      if (res.code === 200) {
        this.cate.cateIcon = res.data.url
        this.$message({
          type: 'success',
          message: '上传成功'
        })
      }
    },
    onSubmit (res, file) {
      // 提交表单新增商品分类
      this.$refs.cateAdd.validate(valid => {
        if (valid) {
          // 表单校验通过可以提交了
          addCate(this.cate).then(res => {
            // 弹出提示 告诉 用户 操作结果
            // 全局引入 element-ui
            if (res.data.code === 200) {
              this.$message.success({
                type: 'success',
                message: res.data.msg,
                duration: 1500,
                onClose: () => {
                  // 刷新页面
                  this.$router.go(0)
                }
              })
            }
          })
        } else {
          return false
        }
      })
    }
  }
}

</script>

<style lang="scss" scoped>

</style>
